<template>
  <view class="container">
    <view class="" style="display: flex;justify-content: space-between;align-items: center;">
      <view class="height-box">
        <input v-model="height" type="number" max="300" placeholder="请输入身高" @change="heightChange" />
      </view>
      <view class="">
        <text>厘米</text>
      </view>
    </view>
    <button class="save-btn" type="primary" @click="saveUpdate">保存</button>
  </view>
</template>

<script>
  /**
   * 建议昵称不重复
   */
  export default {
    data() {
      return {
        height: ''
      };
    },
    onLoad() {
      let vuex_user = this.vuex_user // 从vuex拿
      this.height = vuex_user.height
    },
    methods: {
      // 保存更改
      async saveUpdate() {
        uni.showLoading({
          title: '保存中',
          mask: true
        })
        try {
          let vuex_user = this.vuex_user
          vuex_user.height = this.height
          await uniCloud.callFunction({
            name: 'star-community-user',
            data: {
              flag: 2,
              data: {
                id: vuex_user.id,
                updateData: {
                  height: this.height
                }
              }
            }
          })
          this.$u.vuex('vuex_user', vuex_user)
          uni.navigateBack()
          uni.hideLoading()
        } catch (err) {
          console.log(err);
          uni.hideLoading()
          uni.showToast({
            title: '保存失败',
            icon: 'none'
          })
        }
      },
      // 昵称填写能力回调
      heightChange(e) {
        this.height = e.detail.value
      }
    }
  }
</script>

<style scoped lang="scss">
  .container {
    height: 100vh;
    padding: 20rpx;
    background-color: #eee;
  }

  .height-box {
    width: 90%;
    padding: 20rpx 30rpx;
    background-color: #fff;
    border-radius: 20rpx;
  }

  .save-btn {
    margin-top: 50rpx;
  }
</style>